<!--  -->
<template>
  <div id="home">
    <!-- 首页搜索框 -->
    <van-search placeholder="请输入搜索关键词"
                v-model="searchVal"
                shape="round"
                @click="$router.push('/home/searchPopup').catch(err=>{})"
                disabled />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe"
               :autoplay="2000"
               indicator-color="blue">
      <van-swipe-item v-for="(item,index) in bannerLists"
                      :key="index">
        <img :src="item.image_url"
             :alt="item.name"
             width="100%">
      </van-swipe-item>
    </van-swipe>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li>20</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
      <li>24</li>
      <li>25</li>
      <li>26</li>
      <li>27</li>
      <li>28</li>
      <li>29</li>
      <li>30</li>
      <li>31</li>
      <li>32</li>
      <li>33</li>
      <li>34</li>
      <li>35</li>
      <li>36</li>
      <li>37</li>
      <li>38</li>
      <li>39</li>
      <li>40</li>
      <li>41</li>
      <li>42</li>
      <li>43</li>
      <li>44</li>
      <li>45</li>
      <li>46</li>
      <li>47</li>
      <li>48</li>
      <li>49</li>
      <li>50</li>
      <li>51</li>
      <li>52</li>
      <li>53</li>
      <li>54</li>
      <li>55</li>
      <li>56</li>
      <li>57</li>
      <li>58</li>
      <li>59</li>
      <li>60</li>
      <li>61</li>
      <li>62</li>
      <li>63</li>
      <li>64</li>
      <li>65</li>
      <li>66</li>
      <li>67</li>
      <li>68</li>
      <li>69</li>
      <li>70</li>
      <li>71</li>
      <li>72</li>
      <li>73</li>
      <li>74</li>
      <li>75</li>
      <li>76</li>
      <li>77</li>
      <li>78</li>
      <li>79</li>
      <li>80</li>
      <li>81</li>
      <li>82</li>
      <li>83</li>
      <li>84</li>
      <li>85</li>
      <li>86</li>
      <li>87</li>
      <li>88</li>
      <li>89</li>
      <li>90</li>
      <li>91</li>
      <li>92</li>
      <li>93</li>
      <li>94</li>
      <li>95</li>
      <li>96</li>
      <li>97</li>
      <li>98</li>
      <li>99</li>
      <li>100</li>
    </ul>
    <!-- 搜索动画 -->
    <transition name="van-slide-right">
      <router-view></router-view>
    </transition>
  </div>

</template>

<script>
import "@/vantui"
import { getHomeList } from "@/request/api.js"
export default {
  data () {
    return {
      searchVal: '',//上面搜索框的值
      bannerLists: [],//轮播图的数据
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {
    //console.log(getHomeList);
    getHomeList()
      .then(res => {
        if (res.errno == 0) {
          //console.log(res.data);
          this.bannerLists = res.data.banner;
        }

      }).catch(err => {
        console.log(err)
      })
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  text-align: center;
  background-color: #ccc;
}

.fade-enter,
.fade-leave-to {
  /* 进场初始效果 */
  right: -100%;
}
.fade-enter-active,
.fade-leave-active {
  /* 进场进行中效果 */
  transition: all 2.2s;
}
.fade-enter-to,
.fade-leave {
  /* 进场最终效果 */
  right: 0;
}
</style> 
